<!--
 * @Author       : tg
 * @LastEditors  : tg
 * @description  : 常用组|编辑|添加
 * @updateInfo   :
 * @Date         : 2023-08-14 11:04:34
 * @LastEditTime : 2023-08-14 11:04:27
-->
<script lang="ts" setup name="AddCommonGroup">
import { organizaApi } from '@/MainApp/apis/organiza'
const props = defineProps({
  visibleShow: {
    type: Boolean,
    default: false
  },
  // 标题
  header: {
    type: String,
    default: 'add'
  },
  // 编辑数据
  edit: {
    type: Object,
    default: null
  }
})

const emits = defineEmits<{
  (event: 'cancel'): void
  (event: 'confirm'): void
}>()

// 表单
const formKey = {
  name: '', // 分组名称
  id: '',
  organizations: [] as any // 分组内组织单位id集合
}
const userFormRef = ref()
const userForm: any = ref(formKey)
const { msgSuccess, msgError } = useMessage()
// 表单校验
const userRules = useFormRules([
  {
    key: 'name',
    required: true,
    trigger: 'blur',
    msg: '请输入标签名称'
  },
  {
    key: 'organizations',
    required: true,
    trigger: 'change',
    msg: '请选择单位',
    validator: (rule: any, value: any, cb: any) => {
      if (value.length === 0)
        cb('请选择单位')
      else
        cb()
    }
  }
])
// 显示弹框
const visibleShow = ref(props.visibleShow)
watch(
  () => props.visibleShow,
  bool => {
    visibleShow.value = bool
  }
)

// 打开选择常用单位
const handOpen = async () => {
  if (props.header === 'add') {
    userFormRef.value.resetFields()
    userForm.value.organizations = []
  }
  else {
    userForm.value = {
      name: props.edit.name,
      id: props.edit.id,
      organizations: props.edit.organizations.map((item: {
        [x: string]: any
      }) => {
        item.executeOrganizationName = item.organizationName
        item.executeOrganizationId = item.organizationId
        item.type = 'DEPT'
        return item
      })
    }
  }
}
// 已选单位

// 删除已选单位
const handleCloseTag = (val: number) => {
  userForm.value.organizations.splice(val, 1)
}
// 选择单位
const showPicker = ref(false)
const dataShow: any = ref([])
// 打开选择单位
const selectiveUnit = () => {
  if (userForm.value.organizations) {
    dataShow.value = userForm.value.organizations.map((item: {
      [x: string]: any
    }) => {
      item.elementName = item.executeOrganizationName
      item.elementId = item.executeOrganizationId
      item.elementType = 'DEPT'
      return item
    })
  }
  else { dataShow.value = [] }

  showPicker.value = true
}
// 选择单位返回值
const chargeDeptCharge = (obj: any) => {
  userForm.value.organizations = obj.list.map((item: {
    [x: string]: any
  }) => {
    item.executeOrganizationName = item.elementName
    item.executeOrganizationId = item.elementId
    item.organizationName = item.elementName
    item.organizationId = item.elementId
    item.type = item.elementType
    return item
  })
  showPicker.value = false
  userFormRef.value.clearValidate('organizations')
}

// 关闭取消
const handCancel = () => {
  emits('cancel')
}
// 确定
const queryUser = () => {
  userFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      const params = {
        ...userForm.value
      }
      const { success, msg } = props.header === 'add' ? await organizaApi.labelAdd(params) : await organizaApi.labelUpdate(params)
      if (success) {
        msgSuccess(msg)
        emits('confirm')
      }
      else { msgError(msg) }
    }
  })
}
</script>

<template>
  <GlDialog
    :visible="visibleShow"
    destroy-on-close
    :width="600"
    :title-header="props.header === 'add' ? '新增标签' : props.header === 'edit' ? '已关联单位管理' : '重命名标签'"
    @cancel="handCancel"
    @confirm="queryUser"
    @handOpen="handOpen"
  >
    <template #dialogForm>
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="userRules"
        lab
        el-width="120px"
        label-width="80px"
      >
        <el-form-item label="标签名称" prop="name">
          <el-input
            v-model="userForm.name"
            clearable
            maxlength="20"
            :disabled="props.header === 'edit'"
            show-word-limit
            placeholder="请输入标签名称"
          />
        </el-form-item>
        <el-form-item v-if="props.header === 'edit'" label="单位" prop="organizations">
          <el-button @click="selectiveUnit">
            <i class="iconfont icon-icon_add" style="margin-right: 5px;font-weight: 600;font-size: 12px;"></i>
            选择单位
          </el-button>
          <p style="padding-left: 20px;line-height: 40px;">已关联 {{ userForm.organizations?.length }} 家单位</p>
          <GlExecutiveUnit
            :unit-list="userForm.organizations"
            :icon-show="false"
            @handleDeleteTag="handleCloseTag"
          />
        </el-form-item>
      </el-form>
    </template>
  </GlDialog>
  <!-- // 选中单位 -->
  <GlPicker
    v-model="showPicker"
    :data-show="dataShow"
    title="选择单位"
    @chargeDeptCharge="chargeDeptCharge"
  />
</template>

<style lang="scss" scoped>
.unit-ul{
  width: 100%;
  // padding: 16px 16px 0;
  // border: 1px solid #ebebeb;
  box-sizing: border-box;
  margin-top: 16px;
  // border-radius: 4px;
  .el-tag{
    line-height: 40px;
    height: 40px;
    background: #F6F8FC;
    border-radius: 1px;
    border: none;
    margin-bottom: 16px;
    margin-right: 16px;
    padding: 0 16px;
    margin-left: 0;
    font-weight: 400;
    font-size: 14px;
    color: #273756;
  }
}
</style>
